@import "src/css/mixin";

#ProjectList {
  color: $gray;
  font-size: .13rem;
  background-color: #FFF;

  //会员等级入口
  .get-more-demand {
    background: url("/img/bgMoredemand.jpg") center center no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 10;
    .background-img {
      height: 1.3rem;
      width: 100%;
      padding-top: .3rem;
      h4 {
        opacity: 0.8;
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #FFFFFF;
        letter-spacing: -0.68px;
        line-height: .14rem;
        margin-bottom: .2rem;
        text-align: center;
      }
      .to-user-level {
        display: block;
        width: 1rem;
        height: .29rem;
        line-height: .27rem;
        background: #A3C2FC;
        border: 1px solid #FFFFFF;
        border-radius: 3px;
        font-family: PingFangSC-Regular;
        font-size: .14rem;
        color: #FFFFFF;
        letter-spacing: -0.68px;
        text-align: center;
        margin: 0 auto;
        margin-bottom: .25rem;
        padding-left: .06rem;
        padding-right: .06rem;
        &:focus {
          outline: none;
        }
      }
    }
    .bg {
      height: .11rem;
      background: #F4F9FF;
    }
  }
  // 类型筛选
  .filter-pane {
    height: .45rem;
    line-height: .45rem;
    background-color: #fff;
    font-size: .12rem;
    color: $gray;
    border-bottom: 1px solid $linecolor;
    position: relative;
    z-index: 9;

    .icon-circle-down {
      font-size: .12rem;
      transform: scale(.75, .75) rotate(0deg);
      display: inline-block;
      vertical-align: middle;
      transition: all .3s;
    }
    .rotate {
      transform: scale(.75, .75) rotate(180deg);
    }
    .choice-val {
      @include text-ellipsis(.5rem);
      display: inline-block;
      vertical-align: middle;
    }

    .choice-pane {
      display: none;
      position: absolute;
      top: .45rem;
      left: 0;
      background-color: rgba(0, 0, 0, .6);
      width: 100%;
      height: 1000px;
      z-index: 9;
      font-size: .13rem;
      color: $black;

      ul {
        padding: 0;
        list-style: none;
        margin: 0;
        background-color: #fff;
        display: none;

        li {
          line-height: .54rem;
          list-style: none;
          padding: 0 .2rem;
          border-bottom: 1px solid $linecolor;

          .icon-right {
            line-height: .55rem;
            font-size: .12rem;
            transform: scale(.75, .75);
          }
        }
      }
    }
  }
  .promptBar {
    height: .25rem;
    width: 100%;
    font-size: .12rem;
    line-height: .25rem;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    top: -1px;
    background-color: #78AAFF !important;
    position: relative !important;
    display: inline-block;
  }
  .downMore {
    width: 100%;
    height: .7rem;
    background: url("/img/loading.gif") no-repeat center;
    background-size: .6rem .1rem;
  }
  .item {
    border-bottom: 1px solid $linecolor;
    position: relative;
    padding: 0 0.2rem;
    padding-top: .22rem;
    &.joined {
      background: #F7FAFF;
    }
    .pic-one {
      position: absolute;
      right: 0;
      top: 0;
      width: .44rem;
      height: .44rem;
    }
  }
  .no-demand {
    text-align: center;
    padding: .55rem 0;
    font-size: .12rem;

    .icon-wuxiangmu {
      font-size: .48rem;
    }
    .info {
      margin: .22rem 0 .7rem;
      color: $gray;
    }
    .icon-right {
      transform: scale(.7, .7);
      display: inline-block;
    }
  }
  .project-show{
    font-size: .13rem;
    .icon-checkmark02{
      color: #38c254;
      font-size: 12px;
    }
    .icon-complete-pc{
      color: #7ED321;
      opacity: 0.3;
      font-size: 1.3rem;
      position: absolute;
      right: 0.18rem;
      top: .2rem;
    }
    .side{position: absolute;right: 0;top:.64rem;color: $lightgray;font-size: .21rem;color:$black}

    .grab-btn{
      // width: .72rem;
      height:.3rem;
      border: 1px solid $blue;
      background: #fff;
      color: $blue;
      font-size: 12px;
      padding: 0 .10rem;
      border-radius: 2px;
      border-radius: 100px;
    }
    .icon-phone03{
      color: $blue;
      font-weight: 500;
      font-size: .18rem;
    }
    .grab-icon{
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }
    .demand-status{
      color: #7ed321;
      opacity: .3;
      font-size: 1.3rem;
      position: absolute;
      right: 0;
      top: -.7rem;
      z-index: -1;
    }
    .hd{
      position: relative;
      h2{
        font-size: .18rem;
        font-weight: 700;
        color: $black;
        margin: 0;
        height: .2rem;
        margin-top: .06rem;
        margin-bottom:.09rem;
      }
      .client-info{
        font-size: 12px;
        color: $lightgray;
        margin-bottom: .2rem;
      }
      .budget{
        font-weight: 700;
        line-height: .28rem;
        cite{
          font-size: .12rem;
          color: $lightgray;
          vertical-align:bottom;
          font-style: normal;
          font-weight: 500;
        }
        .amt{
          font-size:0.2rem;
          font-weight: 700;
          line-height: 1;
          color: $black;
        }
        span{
          font-size: .14rem;
          color: $black;
        }
      }
    }
    .bd{
      position: relative;
      li{line-height: 2.1;list-style: none;width: 2.5rem;    overflow: hidden;    text-overflow: ellipsis;}
      .note{
        color: $lightgray;
      }
      ul{padding: 0;margin: 0;}
      .other-info{
        font-size: .12rem;
        color: $lightgray;
        letter-spacing: 0;
        margin-top:.1rem;
      }
      .note{
        font-size: 12px;
        color: $black;
      }
      .color-red{
        color: #ff001f;
      }
    }
    //录音
    .audioPane {
      position: relative;
      // top: .67rem;
      // right: 0;
      width: 40px;
      margin-top: 0.15rem;
      .pgs {
        width: 40px;
        background-color: #E3E8EE;
        text-align: center;
        position: relative;
        overflow: hidden;

        .pgs-play {
          position: absolute;
          top: 1px;
          left: 4.65%;
          width: 0;
          height: 0.32rem;
          background-color: $blue;
          z-index: 1;
        }
        img {
          width: 3.26rem;
          position: relative;
          z-index: 2;
          margin-top: -1px;
        }
      }
      .audio-name {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        text-align: center;
        color: #666;
        font-size: .12rem;
      }
      .controls {
        width: 100%;
        height: .4rem;
        padding: 0;
        text-align: center;

        .a-play {
          border: none;
          background: transparent;
          outline: none;
          padding: 0;
        }

        .icon-pause-one {
          border: 0;
          outline: 0;
          padding: 0;
          width: 40px;
          height: 40px;
          background: url('/img/play-01.gif') no-repeat;
          background-size: 40px 40px;
          display: block;
        }
        .icon-play-one {
          width: 40px;
          height: 40px;
          display: block;
          color: $blue;
          background: url('/img/pause-01.gif') no-repeat;
          background-size: 40px 40px;
        }
        .icon-pause {
          font-size: 36px;
          width: 40px;
          height: 40px;
          display: block;
          color: $blue;
        }
        span {
          color: $lightgray;
          font-size: .12rem;
          display: inline-block;
          width: 40px;
          text-align: center;
        }
        .audio-time {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    //图片
    .c-drawing {
      width: 1.66rem;
      height: 1.1rem;
      margin-top: 0.15rem;
      position: relative;
      .c-d-tip {
        font-size: .14rem;
        color: $lightgray;
        text-align: center;
        position: absolute;
        left: 36%;
        margin-left: -.55rem;
        top: .5rem;
      }
      .c-d-tu {
        z-index: 2;
        overflow: hidden;

        img {
          max-width: 1.66rem;
          max-height: 1.1rem;
        }
      }
    }
    //类型标签
    .demand-cate{
      font-weight: normal;
      font-size: 12px;
      display: inline-block;
      color:$blue;
      border:$blue 1px solid;
      border-radius: 12px;
      padding:2px 5px;
      margin-left:.1rem;
      vertical-align: top;
    }
    .demand-repair{
      color:#7ED321;
      border-color: #7ED321;
    }
    .demand-rental{
      color: #F5A623;
      border-color: #F5A623;
    }
    .demand-purchase{
      color: #FA9FAA ;
      border-color: #FA9FAA ;
    }
    .more-func{
      font-size: .14rem;
      color: $blue;
      position: relative;
      top: 1px;
    }
    .call{
      position: absolute;
      top: -.1rem;
      right: -.10rem;
      z-index: 2;
      height: .4rem;
      line-height: .4rem;
      width: .47rem;
      text-align: center;
      font-size: 0.2rem;
      color: $blue;
    }
  }
  #ProjectShow {
    font-size: .13rem;
    .icon-checkmark02 {
      color: #38c254;
      font-size: 12px;
    }
    .icon-complete-pc {
      color: #7ED321;
      opacity: 0.3;
      font-size: 1.3rem;
      position: absolute;
      right: 0.18rem;
      top: .2rem;
    }
    .side {
      position: absolute;
      right: 0;
      top: .64rem;
      color: $lightgray;
      font-size: .21rem;
      color: $black
    }

    .grab-btn {
      // width: .72rem;
      height: .3rem;
      border: 1px solid $blue;
      background: #fff;
      color: $blue;
      font-size: 12px;
      padding: 0 .10rem;
      border-radius: 2px;
      border-radius: 100px;
    }
    .icon-phone03 {
      color: $blue;
      font-weight: 500;
      font-size: .18rem;
    }
    .grab-icon {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }
    .demand-status {
      color: #7ed321;
      opacity: .3;
      font-size: 1.3rem;
      position: absolute;
      right: 0;
      top: -.7rem;
      z-index: -1;
    }
    .hd {
      position: relative;
      h2 {
        font-size: .18rem;
        font-weight: 700;
        color: $black;
        margin: 0;
        height: .2rem;
        margin-top: .06rem;
        margin-bottom: .09rem;
      }
      .client-info {
        font-size: 12px;
        color: $lightgray;
        margin-bottom: .2rem;
      }
      .budget {
        font-weight: 700;
        line-height: .28rem;
        cite {
          font-size: .12rem;
          color: $lightgray;
          vertical-align: bottom;
          font-style: normal;
          font-weight: 500;
        }
        .amt {
          font-size: 0.2rem;
          font-weight: 700;
          line-height: 1;
          color: $black;
        }
        span {
          font-size: .14rem;
          color: $black;
        }
      }
    }
    .bd {
      position: relative;
      li {
        line-height: 2.1;
        list-style: none;
        width: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .note {
        color: $lightgray;
      }
      ul {
        padding: 0;
        margin: 0;
      }
      .other-info {
        font-size: .12rem;
        color: $lightgray;
        letter-spacing: 0;
        margin-top: .1rem;
      }
      .note {
        font-size: 12px;
        color: $black;
      }
      .color-red {
        color: #ff001f;
      }
    }
    //录音
    .audioPane {
      position: relative;
      // top: .67rem;
      // right: 0;
      width: 40px;
      margin-top: 0.15rem;
      .pgs {
        width: 40px;
        background-color: #E3E8EE;
        text-align: center;
        position: relative;
        overflow: hidden;

        .pgs-play {
          position: absolute;
          top: 1px;
          left: 4.65%;
          width: 0;
          height: 0.32rem;
          background-color: $blue;
          z-index: 1;
        }
        img {
          width: 3.26rem;
          position: relative;
          z-index: 2;
          margin-top: -1px;
        }
      }
      .audio-name {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        text-align: center;
        color: #666;
        font-size: .12rem;
      }
      .controls {
        width: 100%;
        height: .4rem;
        padding: 0;
        text-align: center;

        .a-play {
          border: none;
          background: transparent;
          outline: none;
          padding: 0;
        }

        .icon-pause-one {
          border: 0;
          outline: 0;
          padding: 0;
          width: 40px;
          height: 40px;
          background: url('/img/play-01.gif') no-repeat;
          background-size: 40px 40px;
          display: block;
        }
        .icon-play-one {
          width: 40px;
          height: 40px;
          display: block;
          color: $blue;
          background: url('/img/pause-01.gif') no-repeat;
          background-size: 40px 40px;
        }
        .icon-pause {
          font-size: 36px;
          width: 40px;
          height: 40px;
          display: block;
          color: $blue;
        }
        span {
          color: $lightgray;
          font-size: .12rem;
          display: inline-block;
          width: 40px;
          text-align: center;
        }
        .audio-time {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    //图片
    .c-drawing {
      width: 1.66rem;
      height: 1.1rem;
      margin-top: 0.15rem;
      position: relative;
      .c-d-tip {
        font-size: .14rem;
        color: $lightgray;
        text-align: center;
        position: absolute;
        left: 36%;
        margin-left: -.55rem;
        top: .5rem;
      }
      .c-d-tu {
        z-index: 2;
        overflow: hidden;

        img {
          max-width: 1.66rem;
          max-height: 1.1rem;
        }
      }
    }
    //类型标签
    .demand-cate {
      font-weight: normal;
      font-size: 12px;
      display: inline-block;
      color: $blue;
      border: $blue 1px solid;
      border-radius: 12px;
      padding: 2px 5px;
      margin-left: .1rem;
      vertical-align: top;
    }
    .demand-repair {
      color: #7ED321;
      border-color: #7ED321;
    }
    .demand-rental {
      color: #F5A623;
      border-color: #F5A623;
    }
    .demand-purchase {
      color: #FA9FAA;
      border-color: #FA9FAA;
    }
    .more-func {
      font-size: .14rem;
      color: $blue;
      position: relative;
      top: 1px;
    }
    .call {
      position: absolute;
      top: -.1rem;
      right: -.10rem;
      z-index: 2;
      height: .4rem;
      line-height: .4rem;
      width: .47rem;
      text-align: center;
      font-size: 0.2rem;
      color: $blue;
    }
  }
  #ProjectList-container {
    height: auto;
    // overflow-y: auto;
  }
  .outerScroller {
    position: relative;
    top: 0px;
    bottom: 0px;
    width: 100%;
    left: 0px;
  }
  .scroll {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: 0;
    padding-bottom: .5rem;
  }
  //头
  .demand-header {
    height: .4rem;
    // margin-top: .22rem;
    margin-right: -5px;
    .sir {
      height: .4rem;
      width: .4rem;
      border-radius: 50%;
      line-height: .4rem;
      text-align: center;
      background-color: $blue;
      font-size: .21rem;
      color: #FFFFFF;
      letter-spacing: 0;
      float: left;
      vertical-align: top;

    }
    .user-type {
      float: left;
      vertical-align: top;
      padding-left: .08rem;
      .nick {
        display: block;
        font-size: .16rem;
        color: $black;
        letter-spacing: 0;
        height: .16rem;
        line-height: .16rem;
        margin-bottom: .07rem;
        font-weight: 700;
        @include text-ellipsis($width: 2rem);
      }
      .identity {
        font-size: .12rem;
        color: $gray;
        letter-spacing: 0;
        line-height: .12rem;
      }
    }
    .chat {
      float: right;
      vertical-align: top;
      margin-right: -.08rem;
      .icon-news {
        display: inline-block;
        height: .4rem;
        line-height: .4rem;
        width: .47rem;
        text-align: center;
        font-size: .2rem;
        color: $lightgray;
      }
      .icon-phone06 {
        display: inline-block;
        height: .4rem;
        line-height: .4rem;
        width: .47rem;
        text-align: center;
        font-size: 0.2rem;
        color: $gray;
        margin-left: -.02rem;
      }
      .nocall {
        color: #999;
      }
    }
  }
  .project-show {
    margin-bottom: .2rem;
  }
  .active {
    color: $blue;
  }
  .thumbs-up {
    position: absolute;
    bottom: 0.18rem;
    right: .15rem;
    font-size: .12rem;
    color: $black;
    letter-spacing: 0;
    .useful {
      display: inline-block;
      height: .20rem;
      line-height: .2rem;
      padding-right: .13rem;
    }
    .useless {
      display: inline-block;
      height: .20rem;
      line-height: .2rem;
      padding-left: .13rem;
      margin-left: -.02rem;
    }
  }
  .is-look {
    position: absolute;
    bottom: 0.2rem;
    left: .84rem;
    font-size: .12rem;
    color: $blue;
    letter-spacing: 0;
  }
  //引导流程
  .tip {
    position: absolute;
    background: #f5a623;
    font-size: .12rem;
    padding: 7px 20px;
    border-radius: 24px;
    line-height: 1;
    white-space: nowrap;
    top: 1.05rem;
    right: .2rem;
    color: #fff;
    z-index: 1;
  }
  .tip:after {
    content: " ";
    width: 23px;
    height: 9px;
    background: url('/img/sanjiao.png') no-repeat;
    position: absolute;
    margin-top: -15px;
    margin-left: -20px;
    background-size: 23px 9px;
  }
  .icon-cross {
    margin-left: .05rem;
    position: relative;
    font-size: .12rem;
    color: #fff;
    text-align: center;
    right: -.1rem;
    transform: rotate(0) scale(.75, .75);
  }
  //圆满完成
}

// aui下拉刷新插件css
/**
 * aui-pull-refresh.css 下拉刷新
 * verson 0.0.1
 * @author 流浪男 && Beck
 * http://www.auicss.com
 * @todo more things to abstract, e.g. Loading css etc.
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
.aui-refresh-content {
  position: relative;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.aui-refresh-load {
  width: 100%;
  height: 2.2rem;
  position: absolute;
  top: -2.2rem;
  left: 0;
  padding: 0.75rem 0;
}
.aui-refresh-pull-arrow {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  visibility: visible;
  margin-left: -0.6rem;
  margin-top: -0.6rem;
  background: no-repeat center;
  // background-image: url('data:image/svg+xml;charset=utf-8,<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M99.225 3.528c8.34 0 15.104 6.763 15.104 15.105 0 8.34-6.766 15.105-15.105 15.105-8.342 0-15.105-6.763-15.105-15.105S90.883 3.528 99.225 3.528zM76.567 48.843h45.315c4.17 0 7.552 3.38 7.552 7.552v5.035c0 4.172-3.382 7.552-7.552 7.552H76.567c-4.172 0-7.553-3.38-7.553-7.552v-5.035c0-4.172 3.38-7.552 7.553-7.552zm-10.07 35.245h65.455c4.17 0 7.552 3.38 7.552 7.552v5.035c0 4.172-3.382 7.552-7.552 7.552H66.497c-4.172 0-7.553-3.38-7.553-7.552V91.64c0-4.172 3.38-7.552 7.553-7.552zm8.044 87.596c-20.397-23.16-45.805-52.352-45.805-52.352h140.98s-25.146 28.735-45.4 51.884c-33.454 38.234-18.118 36.4-49.774.468z" fill="#707070" class="transform-group"/></svg>');
  background-size: .5rem  .5rem;
  z-index: 10;
  -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  transform: rotate(0deg) translate3d(0, 0, 0);
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}
.aui-refresh-content.aui-refresh-pull-down .aui-refresh-pull-arrow {
  -webkit-transform: rotate(0deg) translate3d(0,0,0);
  transform: rotate(0deg) translate3d(0,0,0);
}
.aui-refresh-content.aui-refresh-pull-up .aui-refresh-pull-arrow {
  -webkit-transform: rotate(180deg) translate3d(0,0,0);
  transform: rotate(180deg) translate3d(0,0,0);
}
.aui-refreshing .aui-refresh-pull-arrow{
  // background-image: url('data:image/svg+xml;charset=utf-8,<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M99.917.167C45.52.167 1.28 43.642.03 97.737c1.153-47.204 37.045-85.08 81.153-85.08 44.834 0 81.184 39.147 81.184 87.426 0 10.346 8.387 18.738 18.733 18.738 10.342 0 18.733-8.39 18.733-18.737C199.833 44.9 155.1.167 99.917.167zm0 199.833c54.395 0 98.637-43.475 99.883-97.57-1.15 47.2-37.042 85.082-81.15 85.082-44.833 0-81.183-39.15-81.183-87.43 0-10.34-8.392-18.732-18.738-18.732C8.39 81.35 0 89.737 0 100.083 0 155.267 44.733 200 99.917 200z" fill="#707070" class="transform-group"/></svg>');
  -webkit-animation: rotate 1s 0s linear infinite;
  animation: rotate 1s 0s linear infinite;
}